<template>
  <div>
    <!-- main start -->
    <div class="navList">
      <div class="w">
        <div class="logo">
        </div>
        <ul>
          <li ><router-link to="/baseServiceOrderSearch">会员订单查询</router-link></li>
          <li class="active" ><router-link to="/basesServiceOrderAdd">新增会员购买记录</router-link></li>
          <li ><router-link to="/baseServiceOrderStatistics">财务统计</router-link></li>
        </ul>
      </div>
    </div>

    <div class="purchaseRecord" @click="outsideClickHide" >
      <div class="inquiryTerm">
        <div class="w">
          <h1 class="hposition">新增会员购买记录<span></span></h1>
        </div>
      </div>
      <div class="recordCon">
        <form action="" class="recordForm">
          <div class="recordGroup">
            <span>手机号：</span>
            <input type="text" maxlength="11"  v-model="cloudUserPhoneNumber" v-bind:class="ele.cloudUserPhoneNumberEle">
          </div>
          <div class="recordGroup">
            <span>我的姓名：</span>
            <input type="text" v-model="cloudUserName" v-bind:class="ele.cloudUserNameEle">
          </div>
          <div class="recordGroup">
            <span>我的身份：</span>
            <div class="divSelect w146Select" v-bind:class="" >
              <button type="button" class="dropdownText" @click.stop="identDropdownShow=!identDropdownShow;getIdent()">{{identStr}}</button>
              <button type="button" class="dropdownBtn" @click.stop="identDropdownShow=!identDropdownShow;getIdent()"></button>
              <ul class="dropdown-menu" :style="{display:identDropdownShow?'block':'none'}" >
                <li value="" @click="selectIdent(4)">家长</li>
                <li value="" @click="selectIdent(3)">学生</li>
              </ul>
            </div>
            <label class="placeholder" :style="{display:ident==4?'':'none'}" ><span :style="{display:studentName?'none':'inline'}">学生姓名</span><input type="text" value="" placeholder="" v-model="studentName" v-bind:class="ele.studentNameEle"  ></label>
            <div class="divSelect w146Select  overflow225" v-bind:class="ele.relationEle" :style="{display:ident==4?'':'none'}" >
              <button type="button" class="dropdownText" @click.stop="relationDropdownShow=!relationDropdownShow;getRelation()">{{relation}}</button>
              <button type="button" class="dropdownBtn" @click.stop="relationDropdownShow=!relationDropdownShow;getRelation()"></button>
              <ul class="dropdown-menu" :style="{display:relationDropdownShow?'block':'none'}" >
                <li value="父亲" @click="relationClick('父亲')" >父亲</li>
                <li value="母亲" @click="relationClick('母亲')" >母亲</li>
                <li value="爷爷" @click="relationClick('爷爷')">爷爷</li>
                <li value="奶奶" @click="relationClick('奶奶')" >奶奶</li>
                <li value="姥爷" @click="relationClick('姥爷')" >姥爷</li>
                <li value="姥姥" @click="relationClick('姥姥')" >姥姥</li>
                <li value="哥哥" @click="relationClick('哥哥')" >哥哥</li>
                <li value="姐姐" @click="relationClick('姐姐')" >姐姐</li>
                <li value="弟弟" @click="relationClick('弟弟')" >弟弟</li>
                <li value="妹妹" @click="relationClick('妹妹')" >妹妹</li>
                <li value="叔叔" @click="relationClick('叔叔')" >叔叔</li>
                <li value="阿姨" @click="relationClick('阿姨')" >阿姨</li>
                <li value="伯父" @click="relationClick('伯父')" >伯父</li>
                <li value="伯母" @click="relationClick('伯母')" >伯母</li>
                <li value="姨丈" @click="relationClick('姨丈')" >姨丈</li>
                <li value="姨妈" @click="relationClick('姨妈')" >姨妈</li>
                <li value="舅舅" @click="relationClick('舅舅')" >舅舅</li>
                <li value="舅妈" @click="relationClick('舅妈')" >舅妈</li>
                <li value="其他" @click="relationClick('其他')" >其他</li>
              </ul>
            </div>
          </div>
          <div class="recordGroup">
            <span>学校所在地：</span>
            <div class="divSelect w146Select overflow225" v-bind:class="ele.provinceEle">
              <button type="button" class="dropdownText" @click.stop="proviceDropdownShow=!proviceDropdownShow;getProvince()" >{{province}}</button>
              <button type="button" class="dropdownBtn" @click.stop="proviceDropdownShow=!proviceDropdownShow;getProvince()" ></button>
              <ul class="dropdown-menu" :style="{display:proviceDropdownShow?'block':'none'}" >
                <li v-for="(item,index) in citylist" value="item.p" @click="selectProvice(index)" >{{item.p}}</li>
              </ul>
            </div>
            <div class="divSelect w146Select overflow225" v-bind:class="ele.cityEle">
              <button type="button" class="dropdownText" @click.stop="cityDropdownShow=!cityDropdownShow;getCity()" >{{city}}</button>
              <button type="button" class="dropdownBtn" @click.stop="cityDropdownShow=!cityDropdownShow;getCity()" ></button>
              <ul class="dropdown-menu" :style="{display:cityDropdownShow?'block':'none'}">
                <li v-for="(item,index) in citylist[provinceIndex].c" value="item.n" @click="selectCity(index)" >{{item.n}}</li>
              </ul>
            </div>
          </div>
          <div class="recordGroup">
            <span>学校名称：</span>
            <div class="divSelect w330Select" v-bind:class="ele.orgNameEle">
              <button type="button" class="dropdownText" @click.stop="schoolsDropdownShow=!schoolsDropdownShow;baseServiceOrderSelectSchool($event)">{{schoolSelected.orgName}}</button>
              <button type="button" class="dropdownBtn" @click.stop="schoolsDropdownShow=!schoolsDropdownShow;baseServiceOrderSelectSchool($event)" ></button>
              <ul class="dropdown-menu" :style="{display:schoolsDropdownShow?'block':'none'}" >
                <li v-for="(item,index) in schools" value="item.orgName" @click="selectSchool(index)" >{{item.orgName}}</li>
              </ul>
            </div>
          </div>
          <div class="recordGroup">
            <span>班级：</span>
            <div class="divSelect w146Select" v-bind:class="ele.gradeNameEle">
              <button type="button" class="dropdownText" @click.stop="gradesDropdownShow=!gradesDropdownShow;getGrade($event)">{{gradesSelected.gradeName}}</button>
              <button type="button" class="dropdownBtn" @click.stop="gradesDropdownShow=!gradesDropdownShow;getGrade($event)"></button>
              <ul class="dropdown-menu" :style="{display:gradesDropdownShow?'block':'none'}">
                <li v-for="(item,index) in grades" value="item.gradeName" @click="selectGrade(index)">{{item.gradeName}}</li>
              </ul>
            </div>
            <div class="divSelect w146Select" v-bind:class="ele.classNameEle">
              <button type="button" class="dropdownText"  @click.stop="classDropdownShow=!classDropdownShow;baseServiceOrderSelectClass($event)">{{classSelected.className}}</button>
              <button type="button" class="dropdownBtn"  @click.stop="classDropdownShow=!classDropdownShow;baseServiceOrderSelectClass($event)"></button>
              <ul class="dropdown-menu" :style="{display:classDropdownShow?'block':'none'}">
                <li v-for="(item,index) in classs" value="item.className" @click="selectClass(index)">{{item.className}}</li>
              </ul>
            </div>
          </div>
          <div v-bind:class="divGroup.infoGroup">
            <div class="recordGroup">
              <span>购买时长：</span>
              <input type="text" v-model="timeBuySelected" disabled="true" v-if="!timeBuyDiv">
              <div class="divSelect w146Select" v-bind:class="ele.timeBuyEle" v-if="timeBuyDiv">
                <button type="button" class="dropdownText" @click.stop="timeBuyShow=!timeBuyShow;getTimeBuy()">{{timeBuySelected}}</button>
                <button type="button" class="dropdownBtn" @click.stop="timeBuyShow=!timeBuyShow;getTimeBuy()"></button>
                <ul class="dropdown-menu" :style="{display:timeBuyShow?'block':'none'}">
                  <li v-for="(item,index) in timeBuy" @click="selectTimeBuy(index)">{{item}}</li>
                </ul>
              </div>
            </div>
            <div class="recordGroup">
              <span>支付金额：</span>
              <label class="price"><input type="text" value="" v-bind:class="ele.total_feeEle"  v-model="total_fee" disabled="true"><i>元</i></label>
            </div>
            <div class="recordGroup">
              <span>服务区间：</span>
              <!-- <label class="serviceSpace"><input type="text" v-bind:class="ele.orderStartDayEle" name="orderStartDay" class="Wdate" onclick="WdatePicker()"><i>—</i><input type="text" name="orderEndDay" v-bind:class="ele.orderEndDayEle" class="Wdate" onclick="WdatePicker()"></label> -->
              <label class="serviceSpace"><input type="text" v-model="orderStartDay" disabled="true"><i>—</i><input type="text" v-model="orderEndDay" disabled="true"></label>
            </div>
            <a href="javaScript:void(0)" @click="baseServiceOrderAddBtn()"  class="addServiceBtn">添加购买记录</a>
          </div>
          <div v-bind:class="divGroup.unsoldGroup">
            <div class="recordGroup">
              服务尚未出售!
            </div>
          </div>
          <div v-bind:class="divGroup.noneedGroup">
            <div class="recordGroup">
            您购买的日期已经到达服务的截至日期了，无需购买啦!
            </div>
          </div>
        </form>
      </div>
    </div>

    <div class="modalPanel" @click="modalFade($event)" v-bind:style="modalStyle">
      <div class="modalBg"  @click.stop="modalBgFade($event)">
        <div class="modalTitle">
         订单信息确认
         <span class="closeModal" @click.stop="closeModal()">&times;</span>
        </div>
        <div class="modalBody">
          <div class="orderInfo"><span>手机号：</span><p>{{cloudUserPhoneNumber}}</p></div>
          <div class="orderInfo"><span>我的姓名：</span><p>{{cloudUserName}}</p></div>
          <div class="orderInfo"><span>我的身份：</span>
            <p v-if="ident==4">{{studentName}}的{{relation}}</p>
            <p v-if="ident==3">学生</p>
          </div>
          <div class="orderInfo"><span>学校所在地：</span><p>{{province}}{{city}}</p></div>
          <div class="orderInfo"><span>学校名称：</span><p>{{schoolSelected.orgName}}</p></div>
          <div class="orderInfo"><span>班级：</span><p>{{this.classSelected.className}}</p></div>
          <div class="orderInfo"><span>购买时长：</span><p>{{timeBuySelected}}</p></div>
          <div class="orderInfo"><span>支付金额：</span><p>{{total_fee}}元</p></div>
          <div class="orderInfo"><span>服务区间：</span><p>{{orderStartDay}}至{{orderEndDay}}</p></div>
        </div>
        <div class="modalFooter">
         <a href="javaScript:void(0)" @click.stop="baseServiceOrderAdd()">确认添加</a>
        </div>
      </div>
    </div>

    <!-- main end -->
  </div>
</template>

<script>

import axios from 'axios'
import config from '@/config'
import district from '@/city'

//console.log(district.citylist[0].p)
export default {
  name: 'baseServiceOrderAdd',
  data () {
    return {
      cloudUserPhoneNumber: '',
      total_fee: '',
      relation: '父亲',
      relationDropdownShow:false,
      // 身份
      ident: 4,
      identStr: '家长',
      identDropdownShow: false,
      // 
      schools: [],
      schoolsDropdownShow:false,
      schoolSelected: {},
      classes: [],

      citylist:district.citylist,
      province: '',//'aaa',江西省',
      provinceIndex: 0,
      city: '',//'bb','上饶',
      cityIndex: 0,
      proviceDropdownShow:false,
      cityDropdownShow:false,

      pageSN: 1,
      pageSize: 1000,

      //年级班级
      grades:[],
      gradesDropdownShow:false,
      gradesSelected: {},
      classs: [],
      classDropdownShow:false,
      classSelected: {},
      //数据绑定
      cloudUserPhoneNumberEle:'',
      cloudUserName:'',
      studentName:'',
      timeBuy:'',
      timeBuySelected:'',
      timeBuyDiv:true,
      orderStartDay:'',
      orderEndDay:'',
      serviceDetails:'',
      divGroup:{
        infoGroup:'canshow',
        unsoldGroup:'hidden',
        noneedGroup:'hidden',
      },
      timeBuyShow:false,
      ele:{
       cloudUserPhoneNumberEle:'',
       cloudUserNameEle:'',
       studentNameEle:'',
       relationEle:'',
       provinceEle:'',
       cityEle:'',
       orgNameEle:'',
       gradeNameEle:'',
       classNameEle:'',
       timeBuyEle:'',
       // total_feeEle:'',
       // orderStartDayEle:'',
       // orderEndDayEle:''
      },
      modalStyle:{
       display:"none"
      },
      serviceDuration:''
      //aBtnStyle:''//active
    }
  },
  methods: {
    relationClick: function (val) {
      this.relation = val
      this.relationDropdownShow = false
    },
    getIdent:function(){
      this.schoolsDropdownShow = false;
      this.proviceDropdownShow = false;
      this.cityDropdownShow = false;
      this.gradesDropdownShow = false;
      this.classDropdownShow = false ;
      this.timeBuyShow=false;
      this.relationDropdownShow=false;
    },
    getRelation: function () {
      this.schoolsDropdownShow = false;
      this.proviceDropdownShow = false;
      this.cityDropdownShow = false;
      this.gradesDropdownShow = false;
      this.classDropdownShow = false ;
      this.timeBuyShow=false;
      this.identDropdownShow=false;
    },
    getProvince: function () {
      this.relationDropdownShow = false;
      this.schoolsDropdownShow = false;
      this.cityDropdownShow = false;
      this.gradesDropdownShow = false;
      this.classDropdownShow = false ;
      this.timeBuyShow=false;
      this.identDropdownShow=false;
    },
    getCity:function(){
      this.relationDropdownShow = false;
      this.schoolsDropdownShow = false;
      this.proviceDropdownShow = false;
      this.gradesDropdownShow = false;
      this.classDropdownShow = false ;
      this.timeBuyShow=false;
      this.identDropdownShow=false;
    },
    baseServiceOrderSelectSchool: function (event) {
      this.relationDropdownShow = false;
      this.proviceDropdownShow = false;
      this.cityDropdownShow = false;
      this.gradesDropdownShow = false;
      this.classDropdownShow = false ;
      this.timeBuyShow=false;
      this.identDropdownShow=false;

      var currentTarget=event.currentTarget;
      if(!(this.province && this.city)){
        var parentNode=currentTarget.parentNode;
        parentNode.className="divSelect w330Select";
        return false;
      }
      if (this.schools.length<=0) {
        // var data=new FormData()
        // data.append('request', 'baseServiceOrderSelectSchool')
        // data.append('PHPSESSID', localStorage.PHPSESSID)
        // data.append("province",this.province)
        // data.append("city",this.city)
        // data.append("pageSN",this.pageSN)
        // data.append("pageSize",this.pageSize)

        var data = 'request='+'baseServiceOrderSelectSchool'
          +'&province='+this.province
          +'&city='+this.city
          +'&pageSN='+this.pageSN
          +'&pageSize='+this.pageSize
          +'&PHPSESSID='+localStorage.PHPSESSID
        let _this = this
        axios.post(config.host+'AgentApi/BaseServiceOrderManager/baseServiceOrderSelectSchool',data)
          .then(function (response) {
            let data = response.data
            if (data.result==0) {
              if(data.data.orgCount<=0){
                _this.tip("您在该地区无代理学校");
              }
              _this.schools = data.data.orgs;
              if(_this.schools && _this.schools.length>6){
                var parentNode=currentTarget.parentNode;
                parentNode.className+=" overflow225";
              }else{
                var parentNode=currentTarget.parentNode;
                parentNode.className="divSelect w330Select";
              }
            }
            if (data.result==2) {
              localStorage.clear()
              document.cookie = ''
              _this.$router.push({ path: 'login' })
            }
          })
          .catch(function (error) {
            console.log(error)
            
          });
        }
    },
    selectIdent: function (ident) {
      this.ident = ident;
      if (ident==4) { this.identStr = '家长'; this.studentName='';this.relation='父亲';}
      if (ident==3) { this.identStr = '学生'; this.studentName='';this.relation='';}
      this.identDropdownShow = false;
    },
    selectSchool: function (index) {
      if (index>=0){
        this.schoolSelected = this.schools[index]
      }
      this.schoolsDropdownShow = false;
      this.divGroup={infoGroup:'canshow',unsoldGroup:'hidden',noneedGroup:'hidden'};
      this.grades=[];
      this.gradesSelected={};
      this.classs=[];
      this.classSelected={};
      this.timeBuySelected='';
      this.timeBuy=[];
      this.total_fee='';
      this.orderStartDay='';
      this.orderEndDay='';
    },
    selectProvice: function (index) {
      this.province = this.citylist[index].p
      this.provinceIndex = index
      this.proviceDropdownShow = false

      this.city = ''
      this.cityIndex = 0

      this.schools = []
      this.schoolSelected = {}
      this.grades=[];
      this.gradesSelected={};
      this.classs=[]
      this.classSelected={}
    },
    selectCity: function (index) {
      this.city = this.citylist[this.provinceIndex].c[index].n
      this.cityIndex = index
      this.cityDropdownShow = false

      // 换地区 清空学校
      this.schools = [];
      this.schoolSelected = {};
      this.grades=[];
      this.gradesSelected={};
      this.classs=[];
      this.classSelected={};
    },
    outsideClickHide: function () {
      this.relationDropdownShow = false
      this.schoolsDropdownShow = false
      this.proviceDropdownShow = false
      this.cityDropdownShow = false
      this.gradesDropdownShow = false;
      this.classDropdownShow = false ;
      this.timeBuyShow=false;
      this.identDropdownShow=false;
    },
    //年级班级
    getGrade: function (event) {
      this.relationDropdownShow = false;
      this.schoolsDropdownShow = false;
      this.proviceDropdownShow = false;
      this.cityDropdownShow = false;
      this.classDropdownShow = false ;
      this.timeBuyShow=false;
      this.identDropdownShow=false;
      // var data=new FormData();
      // data.append('request', 'getGrade');
      // data.append('schoolGUID', this.schoolSelected.orgGUID);
      // data.append('PHPSESSID', localStorage.PHPSESSID);
      var data = 'request='+'getGrade'
        +'&schoolGUID='+this.schoolSelected.orgGUID
        +'&PHPSESSID='+localStorage.PHPSESSID
      var _this=this;
      var currentTarget=event.currentTarget;
      axios.post(config.host+'AgentApi/BaseServiceOrderManager/getGrade',data)
      .then(function (response) {
        var data = response.data;
        if (data.result==0) {
          _this.grades=data.data;
          if(_this.grades && _this.grades.length>6){
            var parentNode=currentTarget.parentNode;
            parentNode.className+=" overflow225";
          }else{
            var parentNode=currentTarget.parentNode;
            parentNode.className="divSelect w146Select";
          }
        }
        if (data.result==2) {
          localStorage.clear()
          document.cookie = ''
          _this.$router.push({ path: 'login' })
        }
      })
      .catch(function (error) {
        //console.log(error)
      });
    },
    selectGrade: function (index) {
      if (index>=0){
        this.gradesSelected = this.grades[index]
      }
      this.gradesDropdownShow = false;
      this.classs=[];
      this.classSelected={};
      this.divGroup={infoGroup:'canshow',unsoldGroup:'hidden',noneedGroup:'hidden'};
      this.timeBuySelected='';
      this.timeBuy=[];
      this.total_fee='';
      this.orderStartDay='';
      this.orderEndDay='';
    },
    baseServiceOrderSelectClass: function (event) {
      this.relationDropdownShow = false;
      this.schoolsDropdownShow = false;
      this.proviceDropdownShow = false;
      this.cityDropdownShow = false;
      this.gradesDropdownShow = false;
      this.timeBuyShow=false;
      this.identDropdownShow=false;
      // var data=new FormData();
      // data.append('request', 'baseServiceOrderSelectClass');
      // data.append('schoolGUID', this.schoolSelected.orgGUID);
      // data.append('gradeIndex', this.gradesSelected.gradeIndex);
      // data.append('PHPSESSID', localStorage.PHPSESSID);
      var data = 'request='+'baseServiceOrderSelectClass'
        +'&schoolGUID='+this.schoolSelected.orgGUID
        +'&gradeIndex='+ this.gradesSelected.gradeIndex
        +'&PHPSESSID='+localStorage.PHPSESSID
      var _this=this;
      var currentTarget=event.currentTarget;
      var parentNode=currentTarget.parentNode;
      parentNode.className="divSelect w146Select";
      axios.post(config.host+'AgentApi/BaseServiceOrderManager/baseServiceOrderSelectClass',data)
      .then(function (response) {
        var data = response.data;
        if (data.result==0) {
          _this.classs=data.data;
          if(_this.classs && _this.classs.length>6){
            var parentNode=currentTarget.parentNode;
            parentNode.className+=" overflow225";
          }else{
            var parentNode=currentTarget.parentNode;
            parentNode.className="divSelect w146Select";
          }
        }
        if (data.result==2) {
          localStorage.clear()
          document.cookie = ''
          _this.$router.push({ path: 'login' })
        }
      })
      .catch(function (error) {
        //console.log(error)
      });
    },
    baseServiceAndPurchaseInfo: function (){
      // var data=new FormData();
      // data.append('request', 'baseServiceAndPurchaseInfo');
      // data.append('cloudUserPhoneNumber', this.cloudUserPhoneNumber);
      // data.append('classGUID', this.classSelected.classGUID);
      // data.append('PHPSESSID', localStorage.PHPSESSID);
      var data = 'request='+'baseServiceAndPurchaseInfo'
        +'&cloudUserPhoneNumber='+this.cloudUserPhoneNumber
        +'&classGUID='+ this.classSelected.classGUID
        +'&PHPSESSID='+localStorage.PHPSESSID
      var _this=this;
      var currentTarget=event.currentTarget;
      axios.post(config.host+'AgentApi/BaseServiceOrderManager/baseServiceAndPurchaseInfo',data)
      .then(function (response) {
        var data = response.data;
        if (data.result==0) {
          _this.serviceDetails=data.data;
          if(!_this.serviceDetails['serviceInfo'][0]){
            _this.divGroup={infoGroup:'hidden',unsoldGroup:'canshow',noneedGroup:'hidden'};
            return false;
          }
          if(_this.serviceDetails['purchaseInfo'] && _this.serviceDetails['purchaseInfo'][0]){
            var serviceEndDay=new Date(_this.serviceDetails['serviceInfo'][0]['serviceEndDay']);
            var boughtEndDay=new Date(_this.serviceDetails['purchaseInfo'][0]['boughtEndDay']);
            if(serviceEndDay<=boughtEndDay){
              _this.divGroup={infoGroup:'hidden',unsoldGroup:'hidden',noneedGroup:'canshow'};
              return false;
            }
          }
          if(_this.serviceDetails['serviceInfo'][0]['maximize']==1){
            _this.divGroup={infoGroup:'canshow',unsoldGroup:'hidden',noneedGroup:'hidden'};
            _this.timeBuy=[];
            _this.timeBuyDiv=false;
            _this.orderStartDay=_this.serviceDetails['willBoughtStartDay'];
            _this.total_fee=_this.serviceDetails['serviceInfo'][0][_this.serviceDetails['serviceInfo'][0]['monthSelected']];
            if(_this.serviceDetails['serviceInfo'][0]['monthSelected']=='price12mon'){
              _this.timeBuySelected="一学年";
              _this.orderEndDay=_this.serviceDetails['serviceInfo'][0]['willBoughtEndDay12'];
              _this.serviceDuration=12;
            }
            if(_this.serviceDetails['serviceInfo'][0]['monthSelected']=='price6mon'){
              _this.timeBuySelected="一学期";
              _this.orderEndDay=_this.serviceDetails['serviceInfo'][0]['willBoughtEndDay6'];
              _this.serviceDuration=6;
            }
            if(_this.serviceDetails['serviceInfo'][0]['monthSelected']=='price3mon'){
              _this.timeBuySelected="半学期";
              _this.orderEndDay=_this.serviceDetails['serviceInfo'][0]['willBoughtEndDay3'];
              _this.serviceDuration=3;
            }
            if(_this.serviceDetails['serviceInfo'][0]['monthSelected']=='price1mon'){
              _this.timeBuySelected="一个月";
              _this.orderEndDay=_this.serviceDetails['serviceInfo'][0]['willBoughtEndDay1'];
              _this.serviceDuration=1;
            }
          }else{
            _this.divGroup={infoGroup:'canshow',unsoldGroup:'hidden',noneedGroup:'hidden'};
            _this.timeBuyDiv=true;
            if(_this.serviceDetails['serviceInfo'][0]['price12mon_valid']==1){
              _this.timeBuySelected="一学年";
              _this.timeBuy=["一学年","一学期","半学期","一个月"];
              _this.total_fee=_this.serviceDetails['serviceInfo'][0]['price12mon'];
              _this.orderStartDay=_this.serviceDetails['willBoughtStartDay'];
              _this.orderEndDay=_this.serviceDetails['serviceInfo'][0]['willBoughtEndDay12'];
              _this.serviceDuration=12;
            }else if(_this.serviceDetails['serviceInfo'][0]['price6mon_valid']==1){
              _this.timeBuySelected="一学期";
              _this.timeBuy=["一学期","半学期","一个月"];
              _this.total_fee=_this.serviceDetails['serviceInfo'][0]['price6mon'];
              _this.orderStartDay=_this.serviceDetails['willBoughtStartDay'];
              _this.orderEndDay=_this.serviceDetails['serviceInfo'][0]['willBoughtEndDay6'];
              _this.serviceDuration=6;
            }else if(_this.serviceDetails['serviceInfo'][0]['price3mon_valid']==1){
              _this.timeBuySelected="半学期";
              _this.timeBuy=["半学期","一个月"];
              _this.total_fee=_this.serviceDetails['serviceInfo'][0]['price3mon'];
              _this.orderStartDay=_this.serviceDetails['willBoughtStartDay'];
              _this.orderEndDay=_this.serviceDetails['serviceInfo'][0]['willBoughtEndDay3'];
              _this.serviceDuration=3;
            }else if(_this.serviceDetails['serviceInfo'][0]['price1mon_valid']==1){
              _this.timeBuySelected="一个月";
              _this.timeBuy=["一个月"];
              _this.total_fee=_this.serviceDetails['serviceInfo'][0]['price1mon'];
              _this.orderStartDay=_this.serviceDetails['willBoughtStartDay'];
              _this.orderEndDay=_this.serviceDetails['serviceInfo'][0]['willBoughtEndDay1'];
              _this.serviceDuration=1;
            }
          }
        }
        if (data.result==2) {
          localStorage.clear()
          document.cookie = ''
          _this.$router.push({ path: 'login' })
        }
      })
      .catch(function (error) {
        //console.log(error)
      });
    },
    selectClass: function (index) {
      if (index>=0){
        this.classSelected = this.classs[index]
      }
      this.classDropdownShow = false;

      var param=this.paramJudge();
      if(!param){
        // this.schools = []
        // this.schoolSelected = {}
        // this.grades=[];
        // this.gradesSelected={};
        this.classs=[]
        this.classSelected={}
        return false;
      }
      // 获取服务
      this.baseServiceAndPurchaseInfo()
    },
    getTimeBuy: function () {
      this.relationDropdownShow = false;
      this.schoolsDropdownShow = false;
      this.proviceDropdownShow = false;
      this.cityDropdownShow = false;
      this.gradesDropdownShow = false;
      this.classDropdownShow = false ;
      this.identDropdownShow=false;
    },
    selectTimeBuy:function(index){
      if (index>=0){
        this.timeBuySelected = this.timeBuy[index]
      }
      if(this.timeBuySelected=='一学年'){
        this.total_fee=this.serviceDetails['serviceInfo'][0]['price12mon'];
        this.orderEndDay=this.serviceDetails['serviceInfo'][0]['willBoughtEndDay12'];
        this.serviceDuration=12;
      }else if(this.timeBuySelected=='一学期'){
        this.total_fee=this.serviceDetails['serviceInfo'][0]['price6mon'];
        this.orderEndDay=this.serviceDetails['serviceInfo'][0]['willBoughtEndDay6'];
        this.serviceDuration=6;
      }else if(this.timeBuySelected=='半学期'){
        this.total_fee=this.serviceDetails['serviceInfo'][0]['price3mon'];
        this.orderEndDay=this.serviceDetails['serviceInfo'][0]['willBoughtEndDay3'];
        this.serviceDuration=3;
      }else if(this.timeBuySelected=='一个月'){
        this.total_fee=this.serviceDetails['serviceInfo'][0]['price1mon'];
        this.orderEndDay=this.serviceDetails['serviceInfo'][0]['willBoughtEndDay1'];
        this.serviceDuration=1;
      }
      this.timeBuyShow=false;
    },
    baseServiceOrderAddBtn:function(){
      var parm=this.paramJudge();
      if(!parm){
        return false;
      }
      if(!this.timeBuy){
        this.tip("请选择购买时长");
        if(this.ele.timeBuyEle!="error"){
          this.ele.timeBuyEle="error";
        }
        return false;
      }else{
        this.ele.timeBuyEle="";
      }
      this.modalStyle.display="block";
    },
    baseServiceOrderAdd:function(){
      var relationCur;
      if(this.ident==3){
        this.studentName='';
        relationCur='';
      }else if(this.ident==4){
        relationCur=this.relation;
      }

      // var data=new FormData();
      // data.append("cloudUserPhoneNumber",this.cloudUserPhoneNumber);
      // data.append("cloudUserName",this.cloudUserName);
      // data.append("studentName",this.studentName);
      // data.append("relation",this.relation);
      // data.append("schoolGUID",this.schoolSelected.orgGUID);
      // data.append("schoolName",this.schoolSelected.orgName);
      // data.append("className",this.classSelected.className);
      // data.append("classGUID",this.classSelected.classGUID);
      // data.append("total_fee",this.total_fee);
      // data.append("orderStartDay",this.orderStartDay);
      // data.append("orderEndDay",this.orderEndDay);
      // data.append("serviceDuration",this.serviceDuration);
      // data.append('request', 'baseServiceOrderAdd');
      // data.append('PHPSESSID', localStorage.PHPSESSID);
      var data = 'cloudUserPhoneNumber='+this.cloudUserPhoneNumber
        +'&cloudUserName='+this.cloudUserName
        +'&studentName='+this.studentName
        +'&relation='+relationCur             //this.relation
        +'&schoolGUID='+this.schoolSelected.orgGUID
        +'&schoolName='+this.schoolSelected.orgName
        +'&className='+this.classSelected.className
        +'&classGUID='+this.classSelected.classGUID
        +'&total_fee='+this.total_fee
        +'&orderStartDay='+this.orderStartDay
        +'&orderEndDay='+this.orderEndDay
        +'&serviceDuration='+this.serviceDuration
        +'&request='+'baseServiceOrderAdd'
        +'&ident='+ this.ident
        +'&PHPSESSID='+localStorage.PHPSESSID
      var _this=this;
      axios.post(config.host+'AgentApi/BaseServiceOrderManager/baseServiceOrderAdd',data)
      .then(function (response) {
        var data = response.data;
        if (data.result==0) {
          _this.modalStyle.display="none";
          _this.tip("提交成功");
          setTimeout(function () {
            window.location.reload();
          }, 2000);
        }
        if(data.result==1){
          _this.tip("提交失败");
        }
        if (data.result==2) {
          // localStorage.clear();
          // document.cookie = '';
          // _this.$router.push({ path: 'login' });
        }
      })
      .catch(function (error) {
        //console.log(error)
      });
    },
    paramJudge:function(){
      var pnoneReg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
      if(!this.cloudUserPhoneNumber){
        this.tip("手机号码不能为空");
        if(this.ele.cloudUserPhoneNumberEle!="error"){
          this.ele.cloudUserPhoneNumberEle="error";
        }
        return false;
      }else{
        this.ele.cloudUserPhoneNumberEle="";
      }
      if(!pnoneReg.test(this.cloudUserPhoneNumber)){
        this.tip("请填写正确的手机号");
        if(this.ele.cloudUserPhoneNumberEle!="error"){
          this.ele.cloudUserPhoneNumberEle="error";
        }
        return false;
      }else{
        this.ele.cloudUserPhoneNumberEle="";
      }
      if(!this.cloudUserName){
        this.tip("请填写姓名");
        if(this.ele.cloudUserNameEle!="error"){
          this.ele.cloudUserNameEle="error";
        }
        return false;
      }else{
        this.ele.cloudUserNameEle="";
      }
      if(!this.studentName && (this.ident==4) ){
        this.tip("请填写学生姓名");
        if(this.ele.studentNameEle!="error"){
          this.ele.studentNameEle="error";
        }
        return false;
      }else{
        this.ele.studentNameEle="";
      }
      if(!this.relation && (this.ident==4) ){
        this.tip("请选择关系");
        if(this.ele.relationEle!="error"){
          this.ele.relationEle="error";
        }
        return false;
      }else{
        this.ele.relationEle="";
      }
      if(!this.province){
        this.tip("请选择省份");
        if(this.ele.provinceEle!="error"){
          this.ele.provinceEle="error";
        }
        return false;
      }else{
        this.ele.provinceEle="";
      }
      if(!this.city){
        this.tip("请选择城市");
        if(this.ele.cityEle!="error"){
          this.ele.cityEle="error";
        }
        return false;
      }else{
        this.ele.cityEle="";
      }
      if(!this.schoolSelected.orgName){
        this.tip("请选择学校");
        if(this.ele.orgNameEle!="error"){
          this.ele.orgNameEle="error";
        }
        return false;
      }else{
        this.ele.orgNameEle="";
      }
      if(!this.gradesSelected.gradeName){
        this.tip("请选择年级");
        if(this.ele.gradeNameEle!="error"){
          this.ele.gradeNameEle="error";
        }
        return false;
      }else{
        this.ele.gradeNameEle="";
      }
      if(!this.classSelected.className){
        this.tip("请选择班级");
        if(this.ele.classNameEle!="error"){
          this.ele.classNameEle="error";
        }
        return false;
      }else{
        this.ele.classNameEle="";
      }
      return true;
    },
    tip:function(content){
      var tooltip=document.getElementsByClassName("tooltip");
      if (tooltip.length > 0) {
         return false;
      }
      var pElement = document.createElement("div");
      pElement.className="tooltip fadeIn";
      var messageNode = document.createTextNode(content);
      pElement.appendChild(messageNode);
      document.body.appendChild(pElement);
      setTimeout(function () {
          setTimeout(function () {
              document.body.removeChild(pElement);
          }, 300);
      }, 1000);
    },
    modalFade:function(event){
      var cur=event.currentTarget;
      if(cur.className=="modalPanel"){
       this.modalStyle.display="none";
       return false;
      }
    },
    modalBgFade:function(){
      var cur=event.currentTarget;
      if(cur.className=="modalBg"){
       this.modalStyle.display="block";
       return false;
      }
    },
    closeModal:function(){
      this.modalStyle.display="none";
    }
  },
  watch:{

   },
   computed:{

  },
  mounted:function(){
    this.$nextTick(function(){
     // console.log(this.schools);
      //this.schools = [];
    })
  }
}


//console.log($dp,WdatePicker);
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.purchaseRecord h1.hposition span{right:230px;}
.purchaseRecord{background:#F2F2F2;}
.purchaseRecord .recordCon{background:#fff;}
</style>
